<script setup name="App" lang="ts">
import { storeToRefs } from 'pinia';
import useCounterStore from './store/counter'
// !#3 调用一下生成仓库
const counterStore = useCounterStore()
// 对 store 中数据的结构，会使数据丢失响应式
// const { count, doubleCount, addCount, addCountAsync } = counterStore

// 数据需要响应式的效果，需要通过 storeToRefs 包裹后进行解构
const {count, doubleCount,} = storeToRefs(counterStore)

// !方法不需要关心“响应式”，可以正常解构
const { addCount, addCountAsync } = counterStore

</script>
<template>
  <div>
    <p>count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <button @click="addCount">+1</button>
    <button @click="addCountAsync">async +1</button>
  </div>
</template>
